The style of your website text is one of the most important elements in design and user experience, but it’s often rushed or overlooked altogether. Optimal typography choices mean that your visitors spend more time on your website, and – importantly – enjoy doing so.
Currently reading: The Beginner's Guide To Using & Styling Web Fonts In WordPress Share on XBut how do you style your website text to create an enjoyable experience for your visitors? This guide takes you through the ins and outs of how to install and style fonts for your website, taking into consideration accessibility, site speed, and how to pair fonts like a pro.
Instead of reading this post in order, feel free to jump to a specific section that interests you:
- Fonts vs typefaces
- Web fonts vs computer (system) fonts
- Getting cozy with your text: essential typography terms
- The art of pairing fonts: combining styles
- Using Google Fonts on your WordPress website
- How to be smart with your website fonts
Or if you prefer to read everything in order, let’s dive in!
What’s the difference between a font and a typeface?
In terms of modern day thinking: a typeface is the common design of a whole family of fonts. Take “Helvetica” – that’s a typeface. Within the Helvetica family, you have different styles and weights, like Helvetica Bold, Helvetica Light, Helvetica Italic, or Helvetica 12pt. Each of those specific styles and sizes is a font. So, a typeface is the overall design, and a font is a specific variation of that design.
A typeface is a song and the different fonts are the different versions of that song (for example an acoustic version, live version, and studio version).
For the most part, people are generally more familiar with the term “font,” so only real typography enthusiasts are likely to correct you or be fussy about the terminology used in any specific context!
How are web fonts different to computer fonts?
There are some important distinctions between how you use fonts on your own computer vs on your website, so there’s a little bit of a learning curve when you’re first starting out.
Computer fonts (or system fonts) are font files stored directly on your computer. You’ll recognize them by common file extensions like .ttf (TrueType Font) or .otf (OpenType Font). When you’re using software like Photoshop, Word, or other design programs, you’re working with these computer fonts. In these programs, you have a lot of control: you can often manually adjust kerning for specific letter pairs, precisely control tracking (overall letter spacing), and fine-tune line height with great detail. For this level of granular customization on a WordPress website, you’d be looking at using some custom CSS. This is because the primary goal in font styling for a website is usually consistent readability across various devices, rather than intricate typographic adjustments on a per-letter basis.
Web fonts are fonts specifically designed to be delivered over the internet. Their file types are often .woff (Web Open Font Format) or .woff2 (the newer, more efficient version), and sometimes .eot or .svg for older browsers. When someone visits your website, their browser downloads these web font files so they can see your text exactly as you intended, regardless of what fonts are installed on their computer.
Many system fonts are available as web fonts and vice versa. This may be important to you if you’re looking to brand web and other digital assets easily and consistently. For example, the font we use, Josefin Sans, is available as a system font and a web font so we can use it in both our downloadable PDF resources and on our website. As it’s also a Google Font, we can keep the consistency when creating branded Google Docs and Sheets.
Loading the font files from Google’s servers can affect your website’s loading time; however, they can be run locally to minimize the impact. If you’re a Lyrical Host customer, just raise a ticket with our support team if you’d like help with this.
Both web fonts and custom system fonts you download for your computer have specific licenses according to the creator and the context you downloaded them in. Always check to make sure you have the correct license to use the font in the way you want to use it; reach out to the original creator if you’re unsure.
If you need a quick tutorial on how to install and use web fonts on your WordPress website, jump to the penultimate section of this post.
Now we’ve covered the basic background, let’s move on to how to style your text in a way that’s both professional and accessible.
Getting cozy with your text: essential typography terms
When it comes to web typography, there are five key elements to help you make your text easy on the eyes:
Kerning: This is the space between individual letters. Sometimes, certain letter combinations can look a bit awkward if the spacing isn’t just right (think “VA” or “AT”). Good kerning adjusts these tiny gaps to make your words flow beautifully and look balanced. You usually don’t need to adjust this too much on your WordPress site unless you’re using a very decorative font for a heading and notice some odd gaps.
Spacing (or Letter Spacing/Tracking): While kerning is about the space between two letters, spacing (or tracking) is about the overall space between all the letters in a word or paragraph. You can slightly increase or decrease this to make your text feel more airy or more compact. Just a little tweak can make a big difference in how readable a block of text is. Too much or too little space between characters makes text more difficult to read. For small amounts of text, such as a website URL on a social media image, playing with the letter spacing can draw the eye and look effective. However, a full sentence or paragraph like this can be extremely difficult or stressful to read, and can also confuse screen readers (software that reads aloud text).
Line Height (or Leading): This is the vertical space between lines of text. If your lines are too close together, your text can feel squished and hard to read. If they’re too far apart, the paragraph might look disconnected. A good rule of thumb is to have your line height about 1.5 times your font size for comfortable reading. Most WordPress themes have decent default line heights, but if your website is mainly long form text – such as blog posts or text-heavy business pages – it’s something to double check.
Font size: For the main body text on your website, aim for at least 16 pixels (px). This might seem large if you’re used to print, but on screens, especially mobile phones, smaller text is hard to read. Headings should be larger to grab attention and create a visual hierarchy. Your font size should go in descending order from your H1 down to H3 (or more), and you should always choose your heading type based on how important the title or subtitle is on your page, rather than how it looks. If you’re unhappy with the size or style of your headings but you aren’t sure how to change them, just raise a ticket with our customer support team and they’ll be able to help.
Thickness (or Weight): Fonts often come in different weights like light, regular, semi-bold, bold, and extra bold. Using different weights can help you highlight important information without changing the font itself. For example, you might use a regular weight for most of your content and a bold weight for subheadings or key phrases. Fonts that are very thin are more difficult to read.
The art of pairing fonts: combining styles
A common and effective strategy is to pair a more interesting or distinct font for your headings with a simple, easy-to-read font for your body text. This creates visual interest while ensuring your deeper and more long-form content remains highly readable.
Remember, readability is key for headings too, so choose your font carefully if your headings are long; you don’t want something too ornate. Test your font as a heading using the following sentence to check all the characters in the font are legible:
The quick brown fox jumps over the lazy dog.
Your body text should be a clear, simple font for extended reading. Think boring! Sans-serif fonts are often a great choice for this (more on those next).
When you’re testing different body text fonts, make sure you have a whole paragraph of text to check, and remember to consider your line height too (this is generally less important for heading font choices as headings are typically no more than a line). Try copying and pasting this paragraph from CatIpsum.com if you need something quick to test with:
Sniff all the things disappear for four days and return home with an expensive injury; bite the vet bite plants so destroy the blinds scratch the postman wake up lick paw wake up owner meow meow twitch tail in permanent irritation. Destroy the blinds find a way to fit in tiny box you are a captive audience, pet me or funny little cat chirrup noise shaking upright tail when standing next to you. Hit you unexpectedly steal raw zucchini off kitchen counter or pushed the mug off the table.
Try to keep the number of fonts you use on your website to a minimum. As well as being easier for you to keep on top of and a consistent look for your visitors, it also means you’re minimizing the impact on your site speed.
Not sure where to start when it comes to combining different fonts? Swipe some done-for-you options here: Google Font Pairings To Try & Love
Serif vs. Sans-Serif
You’ve probably heard these terms, but what do they actually mean?
Serif Fonts: These fonts have little “feet” or decorative strokes at the end of their letters (think Times New Roman or Georgia). Historically, serifs were thought to aid readability in print by guiding the eye along the line. They tend to convey a more traditional, formal, or classic feel.
Sans-Serif Fonts: “Sans” means “without,” so sans-serif fonts are those without the little feet (think Arial, Helvetica, or Open Sans). They have a clean, modern, and often more approachable look. For web content, especially body text, sans-serif fonts are generally considered easier to read on screens because their simple lines render more clearly.
A comparison of a serif font and a sans-serif font.
You can mix and match – in fact, it’s encouraged! One of the most popular pairings is a serif font for headings (for a touch of elegance) and a sans-serif font for the body text (for modern readability).
However, the fonts you’ll want to choose will also depend on your brand. For example, if you’re going for a clean, modern, simple look, you’ll likely stick to sans-serif fonts. If you’re looking for something that represents your personality more, you may want to pick a signature serif.
It may sound obvious, but it’s also important to remember that there can be a big difference between fonts (and their styling) that people can read and that they want to read. If people aren’t enjoying your font choices – or at least finding them unnotable – they won’t stick around as long on your posts or pages. It may also mean that they skim read or miss important information.
Using Google Fonts on your WordPress website
The easiest way to expand the range of fonts you can use on your WordPress website is by using Google Fonts. It’s a huge free library of web fonts that you can easily use by installing a WordPress plugin.
Before you get started with the steps below, you’ll want to check to see if your current theme already has Google Fonts set up and ready to go for you. From your WordPress Dashboard, head to Appearance > Customize and look for a typography/fonts section. If you see a drop down menu with a ton of different font options, you’re all set to start customizing and don’t need to install anything new.
If you don’t see that, the easiest way to broaden your font options is to install a Google Fonts plugin such as this one (or any recently updated one with good reviews!). Go to your WordPress Dashboard, then “Plugins” > “Add New.” Search for your chosen Google Fonts plugin, install it, and activate it.
Once activated, the plugin usually adds a new section to your “Appearance” > “Customize” menu (or sometimes “Settings”). Here, you can browse the Google Fonts library and apply them to different elements of your website such as headings and body text.
How to be smart with your website fonts
To sum up:
Style your website fonts for readability – Always keep kerning, spacing/tracking, line height, font weight and font size at the forefront of your thinking. Always prioritize fonts that are clear and easy to read. Avoid overly decorative, widely spaced, or thin fonts for large blocks of text, especially on smaller screens.
Choose practical over personal – Even if you really love a font, it may not be the right choice for your website – whether it’s hard to read, doesn’t fit your brand, or just doesn’t look right.
Keep it minimal – Each web font you add increases your website’s loading time. Stick to just a few that you’ll actually use, and remove ones you no longer need.
Aim for accessibility-friendly – Ensure there’s enough contrast between your text color and your background color. There are a bunch of contrast checking tools you can use to do this, or stick to the basics of black (or near-black) and white to be safe.
Always test on mobile – Your text styling and even basic unstyled fonts can look completely different on mobile devices, so always check your website on a phone and tablet as well as on desktop.
By keeping these tips in mind, you’ll be well on your way to creating a beautiful and user-friendly WordPress website. And if you’re interested in digging more into typography and its history, we highly recommend the book Just My Type by Simon Garfield.
Enjoy!
Pin this post for later:
No Comments